﻿@import "base";

.homepage section[role=main] {
    margin-left: 0px;

}
#mainlogo{
    padding: 0;
}

iframe {
    background-color: rgba(50, 50, 50, 0.2);
    background-image:url(/images/Tile-Meldung-offline.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
}

#zoomedOutListView {
    height:300px !important;
}
.win-listview :not(.win-footprint).win-container {
   background-color: $bg_color;
}

@media screen and (-ms-view-state: portrait) {
    .homepage section[role=main] {
        margin-left: 100px;
    }
}

.groupeditemslist {
    position: relative;

    /*height: 100%;
    width: 100%;
    z-index: 0;
    padding-right: 120px;*/
    /*padding-left: 120px;*/
}

.item-category{
    display: -ms-grid;
    height: 55px;
    width: 250px;
    color: $tile_text_color;
    background-color: $tile_color;
}
.item-category-title {
    font-size: 11pt;
    font-weight: bold;
    padding: 17px 0px 0px 10px;
}
.item-category-count {
    font-size: 11pt;
    font-weight: bold;
    padding: 17px 0px 0px 210px;
    /*text-align: right;
    margin-right: 20px;*/
}

.item {
    /*-ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 90px;*/
    display: -ms-grid;
    height: 250px;
    width: 250px;
    /*-ms-grid-row-span: 2;*/
    color: $tile_text_color;
    background-color: $tile_color;
}
.item-title {
    font-size: 11pt;
    font-weight: bold;
    padding:10px 0px 0px 10px; 
}
.item-author {
    font-size: 9pt;
    font-weight: normal;
    padding:205px 0px 0px 10px;
}
.item-teaserDate {
    font-size: 9pt;
    font-weight: normal;
    padding:218px 0px 0px 10px;
}
.item-teaserContent {
    font-size: 11pt;
    font-weight: normal;
    overflow: hidden;
    padding: 36px 20px 0px 10px;
    width: 200px;
    height: 160px;
    overflow: hidden;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 1;
    -ms-hyphenate-limit-zone: 1px;

    /*display: block;*/
    /*width: 100px;*/
    /*text-overflow: ellipsis;*/  
}
.item-image {
    /*-ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 90px;*/
    display: -ms-grid;
    height: 250px;
    width: 250px;
    background-color: $tile_color;
	opacity:0.95;
    /*Backgroud Image Attributes*/
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
}
.item-image-title {
    color: $tile_header_color;
    font-size: 11pt;
    font-weight: bold;
    padding:10px 0px 0px 10px;
    width: 236px;
}
.item-image-title-first {
    color: $tile_header_color;
    font-size: 11pt;
    font-weight: bold;
    padding:10px 0px 0px 10px;
    width: 496px;
}
.item-image-author {
    font-size: 9pt;
    font-weight: normal;
    padding: 0px 0px 0px 10px;
    width: 236px;
    margin-top: -10px;
}
.image-Teaser {
  /*max-width: 100%;*/
  max-height: 100%;
  display: block;
  vertical-align: middle;
    z-index:-1;
}
.noscaleimagediv {
    
}
.image-Teaser-first {
    max-width: 100%;
    /*max-height: 100%;*/
  display: block;
  vertical-align: middle;
    z-index:-1;
}
.item-image-teaserDate {
    font-size: 9pt;
    font-weight: normal;
    padding:0px 0px 0px 10px;
    margin-top: -15px;
}
.item-image-teaserContent {
    /*margin-top: -10px;*/
    font-size: 11pt;
    font-weight: normal;
    width: 236px;
    height: 40px;
    overflow: hidden;
    margin-top: 0px;
    padding: 2px 0px 0px 10px;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 1;
    -ms-hyphenate-limit-zone: 1px;

}
.item-image-teaserContent-first {
    font-size: 11pt;
    font-weight: normal;
    /*margin-top: -10px;*/
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 1;
    -ms-hyphenate-limit-zone: 1px;
    width: 496px;
    height: 40px;
    overflow: hidden;
    margin-top: 0px;
    padding: 2px 0px 0px 10px;
}


.item-First, .item-First:hover {
    display: -ms-grid;
    height: 250px;
    width: 510px;
    color: $tile_text_color;
    background-color: $tile_color;
    /*Backgroud Image Attributes*/
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
}
    .item-First .item-title {
        width: 480px;
    }
.item-teaserContent-first {
    font-size: 11pt;
    font-weight: normal;
    overflow: hidden;
    padding: 32px 20px 0px 10px;
    width: 460px;
    height: 160px;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 1;
    -ms-hyphenate-limit-zone: 1px;
    /*display: block;*/
    /*width: 100px;*/
    /*text-overflow: ellipsis;*/  
}
.item-overlay-image-first {
    color: $tile_text_color;
    background-color: $tile_color;
    opacity: 0.95;
    width: 510px;
    margin-top: 130px;
    height: 120px;
    /*opacity: 0.8;*/
}
.item-overlay {
    color: $tile_text_color;
    background-color: $tile_color;
    opacity: 0.95;
    /*background-color: $tile_color;*/
    width: 250px;
    margin-top: 130px;
    height: 120px;
    /*opacity: 0.8;*/
}
.item-overlay-without-image {
    padding-left: 0px;
    width: 230px;
    height: 250px;
    color: $tile_text_color;
}

    .item-overlay-without-image .item-title {
        padding-top: 10px;
        color:$tile_header_color;
    }
    .item-overlay-without-image .item-teaserContent {
        padding-top: 2px;
        overflow: hidden;
        height: 162px;
        margin-bottom: 11px;
    }
    .item-overlay-without-image .item-author,
    .item-overlay-without-image .item-teaserDate {
        font-size: 9pt;
        font-weight: normal;
        padding: 0px 0px 0px 10px;
        width: 236px;
        margin-bottom: 0px;
    }
    .item-overlay-without-image .item-teaserDate {
        margin-top: -3px;
    }

.item-overlay-first {
    background-color: $tile_color;
	opacity: 0.95;
    width: 510px;
    margin-top: 130px;
    height: 120px;
}

#semanticZoomDiv {
    height: 100%;
}

/* Template for items in the zoomed out ListView */
.semanticZoomItem
{
    color: $tile_text_color;
    height: 250px;
    width: 250px;
    overflow: hidden;
    padding: 9px 15px;
    white-space: nowrap;
    display: -ms-flexbox;
    -ms-flex-pack: end;
    -ms-flex-direction: column;
    background-color: $tile_color;
    /*opacity: 0.8;*/
}

.group-header .group-title {
    display: inline-block;
    font-size: 20pt;
    font-family: 'Segoe UI';
    font-weight: 200;
}

.group-header-about .group-title {
    display: inline-block;
    font-size: 20pt;
    font-family: 'Segoe UI';
    font-weight: 200;
}

.group-header {
    color: $headerColor;
    -ms-grid-columns: minmax(0, max-content) 7px max-content;
    -ms-grid-rows: max-content;
    display: -ms-inline-grid;
    line-height: 1.5;
    -ms-grid-column: 3;
    display: inline-block;
    -ms-grid-columns: minmax(0, max-content) 7px max-content;
    -ms-grid-rows: max-content;
    display: -ms-inline-grid;
    line-height: 1.5;
}

.group-header, .group-header:hover, .group-header:hover:active {
	background: transparent;
    border: 0;
    margin-bottom: 1px;
    margin-left: -2px;
    /*margin-right: 5px;*/
    margin-top: 0px;
    min-height: 0;
    padding: 0;
}
    .group-header:hover, .group-header:hover:active {
        color:$active_color;
    }



.group-header-about {
    color: $headerColor;
    -ms-grid-columns: minmax(0, max-content) 7px max-content;
    -ms-grid-rows: max-content;
    display: -ms-inline-grid;
    line-height: 1.5;
    -ms-grid-column: 3;
    display: inline-block;
    -ms-grid-columns: minmax(0, max-content) 7px max-content;
    -ms-grid-rows: max-content;
    display: -ms-inline-grid;
    line-height: 1.5;
}

.group-header-about, .group-header-about:hover, .group-header-about:hover:active {
   background: transparent;
        border: 0;
        margin-bottom: 1px;
        margin-left: -2px;
        /*margin-right: 5px;*/
        margin-top: 0px;
        min-height: 0;
        padding: 0;
}
    .group-header-about:hover, .group-header-about:hover:active {
        color: $headerColor;
    }

.homepage .chevron {
    -ms-grid-column: 3;
    display: inline-block;
    font-size: 20pt;
    font-weight: lighter;
}

.homepage .chevron::before {
    /*content: "\E26B";*/
    font-family: 'Segoe UI Symbol';
}

.default {
    width: 4px;
    height: inherit;    
    background-color: $tile_color;
}
.tests {
    width: 4px;
    height: inherit;    
    background-color: $tile_color;
}
.tablets {
    width: 4px;
    height: inherit;    
    background-color: #D80000;
}
.smartphones {
    width: 4px;
    height: inherit;    
    background-color: #127BFF;
}
.ultrabooks {
    width: 4px;
    height: inherit;    
    background-color: #FFB211;
}
.netultrabooks {
    width: 4px;
    height: inherit;    
    background-color: #FFB211;
}
.appssoftware {
    width: 4px;
    height: inherit;    
    background-color: #6B0FE6;
}
.web {
    width: 4px;
    height: inherit;    
    background-color: #B4DD00;
}
.gadgets {
    width: 4px;
    height: inherit;    
    background-color: #DD0400;
}
.videos {
    width: 4px;
    height: inherit;    
    background-color: $tile_color;
}

/*About*/

ul {
    padding-left: 15px;
}

.about-info{
    display: block;
    width: 250px;
    color: $tile_text_color;
    height: 250px;
    background-color: $tile_color;
}
    .about-info .about-image-container {
        float:left;
        height: 250px;
        width : 250px;
        background-color:white;
    }
        .about-info .about-image-container img {
            height: 250px;
            margin-left:36px;
        }
    .about-info .about-info-content {
        color:$tile_text_color;
        height: 250px;
        width : 250px;
        float:right;
        margin-top: 10px;
    }
.about-big, .about-small {
    background-color: $tile_color;
    line-height:18px;
    display:block;
    float:left;
}

.about-big {
    width:250px;
    height:510px;
}
    .about-big ul{
        margin-top:0px;
        margin-left:10px;
        margin-bottom:0px;
    }
.about-small {
    width: 250px;
    height: 250px;
    float:left;
}
    .about-small img {
        background-color:$bg_color;
    }
    .about-small p,
    .about-big p {
        color:$tile_text_color;
        margin-bottom:0px;
        width:230px;
        padding-left:10px;

    }

    .about-small p:first-child,
    .about-big p:first-child {
        padding-top:10px;
        
    }

.item-about-content-info {
    font-size: 11pt;
    font-weight: normal;
    width: 230px;
    padding:10px 0px 0px 10px; 
}
.item-about-content-info b {
    font-size: 11pt;
    font-weight: bold;
}
#aboutListe {
    font-size: 11pt;
    font-weight: normal;
    width: 210px;
    padding-top: 280px;
    padding-left: 10px;
    margin-left: 20px;
}

.image-about {
    padding-left: 4px;
    height: 120px;
    width: 120px;
    z-index:-1;
}

.item-about-content {
    font-size: 11pt;
    font-weight: normal;
    width: 366px;
    padding:10px 0px 0px 134px; 
}
.item-about-content b {
    font-size: 11pt;
    font-weight: bold;
}

/*Loading Animation*/
progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

.progress-container {
    margin-left: auto;
    margin-right: auto;
    width: 60px;
    height: 60px;
}
img {
    max-height: 100%;
}

a:link, a:visited,a:active {
    color: $link_color;
    text-decoration:$link_decoration;
    font-weight: $link_font_weight;
}
a:hover  {
    color: $link_hover_color !important;   
    font-weight: $link_hover_font_weight;
    text-decoration: $link_decoration;
}


@media screen and (-ms-view-state: snapped) {
	.snapItem-Link {
	    padding: 0px;
	    width: 280px;
	    height: 89px;
	    background-color: $active_color;
	}
		.snapItem-Link .linkTitle {
		    padding: 10px;
		    font-weight: bold;
		    color: $tile_header_snap_color;
		}

    .homepage section[role=main] {
        margin-left: 0px;
    }
    .win-template win-groupheader {
        margin-left: 0px;
    }
    .win-surface {
        margin-left: 0px;
    }
    .win-horizontal.win-viewport .win-surface {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

    .win-horizontal.win-viewport .win-surface {
        margin-left: 0px;
        margin-top: 0px;
    }

        header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }
        .win-vertical.win-viewport .win-surface {
        margin-bottom: 30px;
        /*margin-top: 133px;*/
            margin-right: 0px;
        margin-top: 0px;
        margin-left: 0px;
            width: 280px;
        }
    .win-listview .win-surface {
        /*width: 330px;*/
    }
    .win-listview {
        height: inherit;
        background-color: transparent;
        /*width: 300px;*/
    }
    .win-item {
        background-color: $bg_color;
        /*width: 300px;*/
    }
    .win-listview > .win-horizontal .win-container {
       margin-bottom: 5px;
       margin-right: 0px;
       margin-left: 0px;
       margin-top: 5px;
    }
    .win-listview > .win-vertical .win-container {
       margin-bottom: 5px;
       margin-left: 0px;
       margin-right: 0px;
       margin-top: 5px;
    }
    /*Container CSS*/
    .groupContainer {
        width: 280px;
        height: 300px;
        margin-left: 20px;
        /*margin-bottom: 46px;*/
        padding-bottom: 75px !important;
    }
    .listTitle {
        color: $headerColor;
        width: 280px;
        height: 32px;
        font-size: 20pt;
        font-weight: 200;
        line-height: 24pt;
        margin-top:2px;
        padding-bottom:20px; 
    }
    .listContainer {
        width: 280px;
    }
    /*hide scroll bars*/
    #zoomedOutListView .win-listview .win-viewport.win-horizontal {
        height:100000px;
    }
    /*#zoomedOutListView .win-viewport{ overflow: hidden; }*/
    #snappyRecentList .win-viewport{ overflow: hidden; }
    #snappyOfflineList .win-viewport{ overflow: hidden; }
    #snappyCategoryList .win-viewport{ overflow: hidden; }

    /*Template CSS*/
    #recentTitle:hover, #offlineTitle:hover, #categoryTitle:hover {
        color: $active_color;
    }
    .snapItem_wo_image {
        padding: 0px;
        width: 280px;
        height: 86px;
        margin-top: 4px;
        background-color: $bg_color;;
        color: $tile_text_snap_color;
    }
    .snapItem {
        padding: 0px;
        width: 280px;
        height: 86px;
        background-color: $bg_color;
        color: $tile_text_snap_color;
    }
        .snapItem .snapItem-image {
            float: left;
            width: 60px;
            height: 60px;
            /*padding-left: 4px;*/
            background-color: $tile_color;
			opacity: 0.95;
            /*Backgroud Image Attributes*/
            background-repeat: no-repeat;
            background-position:center;
            background-size: cover;
            z-index:-1;
        }
        .snapItem .colorContainer {
            float: left;
            width: 4px;
            height: 86px;
        }
        .snapItem .colorAndImageContainer {
            float: left;
            width: 64px;
            height: 60px;
        }
        .snapItem .title {
            color: $tile_header_snap_color;
            font-size: 11pt;
            font-weight: bold;
            margin-top: -2px;
            float: left;
            width: 172px;
            padding-left: 10px;
        }
        .snapItem_wo_image .titleLong {
            font-size: 11pt;
            color: $tile_header_snap_color;
            font-weight: bold;
            margin-top: -4px;
            float: left;
            width: 256px;
            padding-left: 0px;
        }
        .snapItem .teaserContent {
            font-size: 11pt;
            font-weight: normal;
            float: left;
            width: 196px;
            height: 40px;
            overflow: hidden;
            padding-left: 10px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
            /*text-align: justify;*/
        }
        .snapItem_wo_image .teaserContentLong {
            font-size: 11pt;
            font-weight: normal;
            float: left;
            height: 40px;
            overflow: hidden;
            width: 256px;
            padding-left: 0px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
            /*text-align: justify;*/
        }
        .snapItem .author {
            font-size: 9pt;
            font-weight: normal;
            float: left;
            width: 196px;
            /*height: 40px;*/
            /*overflow: hidden;*/
            padding-left: 74px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
        }
        .snapItem_wo_image .authorLong {
            font-size: 9pt;
            font-weight: normal;
            float: left;
            /*height: 40px;*/
            /*overflow: hidden;*/
            width: 256px;
            padding-left: 0px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
        }
        .snapItem .teaserDate {
            font-size: 9pt;
            font-weight: normal;
            float: left;
            width: 196px;
            /*height: 40px;*/
            /*overflow: hidden;*/
            padding-left: 74px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
            /*text-align: justify;*/
        }
        .snapItem_wo_image .teaserDateLong {
            font-size: 9pt;
            font-weight: normal;
            float: left;
            /*height: 40px;*/
            /*overflow: hidden;*/
            width: 256px;
            padding-left: 0px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-chars: auto 1;
            -ms-hyphenate-limit-zone: 1px;
            /*text-align: justify;*/
        }
    .clearFloat {
        clear: both;
    }
    .snapCategory {
        height: 40px;
        width: 280px;
        color: $tile_text_snap_color;
        font-size: 11pt;
        font-weight: bold;

        background-color: $tile_color;
    }
        .snapCategory .colorContainer {
            float: left;
            width: 4px;
            height: 40px;
        }
        .snapCategory .title {
            float: left;
            padding-left: 10px;
            padding-top: 10px;
            width: 216px;
        }
        .snapCategory .post_count {
            float: left;
            /*padding-left: 10px;*/
            padding-top: 10px;
            width: 50px;
        }
    /*snap about css*/
    #aboutContainer .about-big {
        height:465px;
    }
    #aboutContainer .about-big, #aboutContainer .about-small {
        background-color:$bg_color;
        margin-bottom:0px;
        padding-bottom:10px;
        width:280px;
        color: $tile_text_snap_color;
    }
        #aboutContainer .about-big p, #aboutContainer .about-small p {
            width:260px;
            color: $tile_text_snap_color;
            padding-left:0px;
        }
    #aboutContainer .about-snap-image-container {
        width: 250px; 
        height: 250px; 
        padding-left: 14px;
    }
    #firstaboutsnap {
        background-color: $bg_color;
    }
   
    /*groupview snapp*/
    #groupHeaderTag {
        margin-top:65px;
    }
    #fullContainer {
        width: 300px;
        margin-left: 20px;
    }
    #groupHeaderTitle {
        font-size : 20pt;
    }
}